<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css"/>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				height: 100vh;
			}
			.mb20 {
				margin-bottom: 20px;
			}
			.table {
				margin-bottom: 0;
			}
			.page-nav {
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 路径导航 -->
			<ol class="breadcrumb">
			  <li>首页</li>
			  <li class="active">{{pageName}}</li>
			</ol>
			<!-- 工具栏 -->
			<div class="container-fluid mb20">
				<form class="form-inline">
					<div class="form-group">
						<input type="text" v-model="seachForm.orgname" placeholder="组织结构名称" class="form-control">
					</div>
					<div class="form-group">
						<select v-model="seachForm.exetype" class="form-control">
							<option value="" disabled selected>行政类别</option>
							<option value="1">卫生监督机构</option>
							<option value="2">行政部门</option>
							<option value="3">协作单位</option>
						</select>
					</div>
					<div class="form-group btn-group">
						<button type="button" class="btn btn-primary" @click="find"><span class="glyphicon glyphicon-search"></span> 搜索</button>
						<button type="reset" class="btn btn-default" @click="clearSearch"><span class="glyphicon glyphicon-erase"></span> 清空</button>
					</div>
					<div class="form-group btn-group">
						<button type="button" class="btn btn-primary" @click="showAdd"><span class="glyphicon glyphicon-pencil"></span> 新增</button>
						<button type="button" class="btn btn-danger" @click="removeBatch" :disabled="checkedId.length == 0"><span class="glyphicon glyphicon-trash"></span> 删除</button>
					</div>
				</form>
			</div>
			<!-- 表格 -->
			<div class="container-fluid">
				<table class="table table-bordered table-striped table-hover">
					<thead>
						<th><input type="checkbox" v-model="isCheckedAll" @click="checkedAll"></th>
						<th>ID</th>
						<th>机构编码</th>
						<th>机构名称</th>
						<th>行政类别</th>
						<th>行政区划</th>
						<th>挂牌时间</th>
						<th>行政区类别</th>
						<th>机构行政级别</th>
						<th>机构性质</th>
						<th>操作</th>
					</thead>
					<tbody>
						<tr v-for="org of orgList" :key="org.id">
							<td><input type="checkbox" ref="cb" v-model="checkedId" :value="org.id"></td>
							<td>{{org.id}}</td>
							<td>{{org.orgno}}</td>
							<td>{{org.orgname}}</td>
							<td>{{org.exeTypeName}}</td>
							<td>{{org.areacode}}</td>
							<td>{{org.listingdate}}</td>
							<td>{{org.areaName}}</td>
							<td>{{org.orgLevelName}}</td>
							<td>{{org.orgproName}}</td>
							<td>
								<button type="button" class="btn btn-link btn-xs" @click="showEdit(org.id)">编辑</button>
								<button type="button" class="btn btn-link btn-xs" @click="remove(org.id)">删除</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- 分页 -->
			<!-- <div class="container-fluid">
				<nav class="page-nav">
					<ul class="pagination">
						<li class="disabled"><a href="#"><span>上一页</span></a></li>
						<li class="active"><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">5</a></li>
						<li><a href="#"><span>下一页</span></a></li>
					</ul>
				</nav>
			</div> -->
      <!-----------------新增窗体---------------------->
      <div id="addWin" class="modal fade" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
              <!-- 设置跳转模态框的宽度 -->
              <div class="modal-content" style="width: 800px;">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title">新增组织机构</h4>
                  </div>
                  <div class="modal-body">
                      <form id="addForm">
                          <!-- 栅格布局 1行12列-->
                          <div class="row"> <!-- 一行 -->
                              <div class="form-group col-sm-4">
                                  <label>机构编码：</label>
                                  <input type="text" v-model="addForm.orgno" class="form-control">
                              </div>
                              <div class="form-group col-sm-4">
                                  <label>机构代码：</label>
                                  <input type="text" v-model="addForm.orgcode" class="form-control">
                              </div>
                              <div class="form-group col-sm-4">
                                  <label>机构名称：</label>
                                  <input type="text" v-model="addForm.orgname" class="form-control">
                              </div>
                          </div>
                          <div class="row">
                              <div class="form-group col-sm-4">
                                  <label>行政类别：</label>
                                  <select v-model="addForm.exetype" class="form-control">
                                      <option value="">--请选择--</option>
                                      <option value="1">卫生监督机构</option>
                                      <option value="2">行政部门</option>
                                      <option value="3">协作单位</option>
                                  </select>
                              </div>
                              <div class="form-group col-sm-4">
                                  <label>行政区划：</label>
                                  <input type="text" v-model="addForm.areacode" class="form-control">
                              </div>
                              <div class="form-group col-sm-4">
                                  <label>行政区类别：</label>
                                  <select v-model="addForm.areatype" class="form-control">
                                      <option value="">--请选择--</option>
                                      <option value="1">省</option>
                                      <option value="2">市</option>
                                      <option value="3">县级市</option>
                                      <option value="4">县</option>
                                      <option value="5">区</option>
                                  </select>
                              </div>
                          </div>
                          <div class="row">
                              <div class="form-group col-sm-4">
                                  <label>挂牌日期：</label>
                                  <input type="date" v-model="addForm.listingdate" class="form-control">
                              </div>
                              <div class="form-group col-sm-4">
                                  <label>独立运行日期：</label>
                                  <input type="date" v-model="addForm.standalonedate" class="form-control">
                              </div>
                              <div class="form-group col-sm-4">
                                  <label>编办批文日期：</label>
                                  <input type="date" v-model="addForm.zbbdocdate" class="form-control">
                              </div>
                          </div>
                          <div class="form-group">
                              <label>地址：</label>
                              <input type="text" v-model="addForm.linkadd" class="form-control">
                          </div>
                          <div class="row">
                              <div class="form-group col-sm-4">
                                  <label>邮政编码：</label>
                                  <input type="text" v-model="addForm.zipcode" class="form-control">
                              </div>
                              <div class="form-group col-sm-4">
                                  <label>机构行政级别：</label>
                                  <select v-model="addForm.orglevel" class="form-control">
                                      <option value="">--请选择--</option>
                                      <option value="1">厅局级</option>
                                      <option value="2">副厅局级</option>
                                      <option value="3">处级</option>
                                      <option value="4">副处级</option>
                                      <option value="5">科级</option>
                                      <option value="6">副科级</option>
                                      <option value="7">副科级以下</option>
                                      <option value="8">未定级</option>
                                  </select>
                              </div>
                              <div class="form-group col-sm-4">
                                  <label>机构性质：</label>
                                  <select v-model="addForm.orgpro" class="form-control">
                                      <option value="">--请选择--</option>
                                      <option value="1">行政机构</option>
                                      <option value="2">全额拨款事业单位</option>
                                      <option value="3">差额拨款事业单位</option>
                                      <option value="4">自收自支事务单位</option>
                                      <option value="5">其他</option>
                                  </select>
                              </div>
                          </div>
                      </form>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                      <button type="button" class="btn btn-primary" @click="add">确定</button>
                  </div>
              </div>
          </div>
      </div>
      <!-----------------新增窗体结束---------------------->
      <!-----------------修改窗体---------------------->
      <div id="editWin" class="modal fade" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
              <div class="modal-content" style="width: 800px">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title">修改组织机构</h4>
                  </div>
                  <div class="modal-body">
                      <form id="editForm">
                          <div class="row">
                              <div class="form-group col-sm-4">
                                  <label>机构编码：</label>
                                  <input type="text" v-model="editForm.orgno" class="form-control">
                              </div>
                              <div class="form-group col-sm-4">
                                  <label>机构代码：</label>
                                  <input type="text" v-model="editForm.orgcode" class="form-control">
                              </div>
                              <div class="form-group col-sm-4">
                                  <label>机构名称：</label>
                                  <input type="text" v-model="editForm.orgname" class="form-control">
                              </div>
                          </div>
                          <div class="row">
                              <div class="form-group col-sm-4">
                                  <label>行政类别：</label>
                                  <select v-model="editForm.exetype" class="form-control">
                                      <option value="">--请选择--</option>
                                      <option value="1">卫生监督机构</option>
                                      <option value="2">行政部门</option>
                                      <option value="3">协作单位</option>
                                  </select>
                              </div>
                              <div class="form-group col-sm-4">
                                  <label>行政区划：</label>
                                  <input type="text" v-model="editForm.areacode" class="form-control">
                              </div>
                              <div class="form-group col-sm-4">
                                  <label>行政区类别：</label>
                                  <select v-model="editForm.areatype" class="form-control">
                                      <option value="">--请选择--</option>
                                      <option value="1">省</option>
                                      <option value="2">市</option>
                                      <option value="3">县级市</option>
                                      <option value="4">县</option>
                                      <option value="5">区</option>
                                  </select>
                              </div>
                          </div>
                          <div class="row">
                              <div class="form-group col-sm-4">
                                  <label>挂牌日期：</label>
                                  <input type="date" v-model="editForm.listingdate" class="form-control">
                              </div>
                              <div class="form-group col-sm-4">
                                  <label>独立运行日期：</label>
                                  <input type="date" v-model="editForm.standalonedate" class="form-control">
                              </div>
                              <div class="form-group col-sm-4">
                                  <label>编办批文日期：</label>
                                  <input type="date" v-model="editForm.zbbdocdate" class="form-control">
                              </div>
                          </div>
                          <div class="form-group">
                              <label>地址：</label>
                              <input type="text" v-model="editForm.linkadd" class="form-control">
                          </div>
                          <div class="row">
                              <div class="form-group col-sm-4">
                                  <label>邮政编码：</label>
                                  <input type="text" v-model="editForm.zipcode" class="form-control">
                              </div>
                              <div class="form-group col-sm-4">
                                  <label>机构行政级别：</label>
                                  <select v-model="editForm.orglevel" class="form-control">
                                      <option value="">--请选择--</option>
                                      <option value="1">厅局级</option>
                                      <option value="2">副厅局级</option>
                                      <option value="3">处级</option>
                                      <option value="4">副处级</option>
                                      <option value="5">科级</option>
                                      <option value="6">副科级</option>
                                      <option value="7">副科级以下</option>
                                      <option value="8">未定级</option>
                                  </select>
                              </div>
                              <div class="form-group col-sm-4">
                                  <label>机构性质：</label>
                                  <select v-model="editForm.orgpro" class="form-control">
                                      <option value="">--请选择--</option>
                                      <option value="1">行政机构</option>
                                      <option value="2">全额拨款事业单位</option>
                                      <option value="3">差额拨款事业单位</option>
                                      <option value="4">自收自支事务单位</option>
                                      <option value="5">其他</option>
                                  </select>
                              </div>
                          </div>
                      </form>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                      <button type="button" class="btn btn-primary" @click="edit">确定</button>
                  </div>
              </div>
          </div>
      </div>
      <!-----------------修改窗体结束---------------------->
		</div>
	
		<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="../js/tools.js" type="text/javascript" charset="utf-8"></script> -->
		<script type="text/javascript">
			$(function(){
				$(':checkbox[name=cb]').click(function(){
					// selectOne();
				});
			})
		</script>
		<!--vuejs代码-->
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					pageName: '组织结构管理',
					// 存放组织结构列表数据
					orgList: [],
          // 查询表单数据
          seachForm: {
            orgname: '',
            exetype: ''
          },
					// 新增表单数据
					addForm: {
            orgno: '',
            orgcode: '',
            orgname: '',
            exetype: '',
            areacode: '',
            areatype: '',
            listingdate: '',
            standalonedate: '',
            zbbdocdate: '',
            linkadd: '',
            zipcode: '',
            orglevel: '',
            orgpro: ''
					},
					// 修改表单数据
					editForm: {
						id: 0,
            orgno: '',
            orgcode: '',
            orgname: '',
            exetype: '',
            areacode: '',
            areatype: '',
            listingdate: '',
            standalonedate: '',
            zbbdocdate: '',
            linkadd: '',
            zipcode: '',
            orglevel: '',
            orgpro: ''
					},
          // 总记录数
          total: 0,
					// 选中的编号
					isCheckedAll: false,
					checkedId: []
				},
				methods: {
          
          
					// 全选
					checkedAll () {
						if (!this.isCheckedAll) {
							this.checkedId = this.orgList.map(item => item.id)
						} else {
							this.checkedId = []
						}
					},
					// 查询列表
					find () {
						$.ajax('http://localhost:8080/organization/find', {
              type: 'get',
              data: {
                orgname: this.seachForm.orgname,
                exetype: this.seachForm.exetype
              },
              success: res => {
                if(res && res.code == 200){
                  console.log('当前页面数据:', res.data.list)
                  console.log('总记录数:', res.data.total)
                  // 将后台响应的数据存放在model中
                  let orgList = res.data.list
                  // 数据处理
                  this.orgList = orgList.map(item => {
                    if(item.exetype=='1'){
                      item.exeTypeName = '卫生监督机构'
                    }else if(item.exeType=='2'){
                      item.exeTypeName = '行政部门'
                    }else{
                      item.exeTypeName = '协作单位'
                    }
                    if(item.areatype=='1'){
                      item.areaName = '省'
                    }else if(item.areatype=='2'){
                      item.areaName = '市'
                    }else if(item.areatype=='3'){
                      item.areaName = '县级市'
                    }else if(item.areatype=='4'){
                      item.areaName = '县'
                    }else{
                      item.areaName = '区'
                    }
                    if(item.orglevel=='1'){
                      item.orgLevelName = '厅局级'
                    }else if(item.orglevel=='2'){
                      item.orgLevelName = '副厅局级'
                    }else if(item.orglevel=='3'){
                      item.orgLevelName = '处级'
                    }else if(item.orglevel=='4'){
                      item.orgLevelName = '副处级'
                    }else if(item.orglevel=='5'){
                      item.orgLevelName = '科级'
                    }else if(item.orglevel=='6'){
                      item.orgLevelName = '副科级'
                    }else if(item.orglevel=='7'){
                      item.orgLevelName = '副科级以下'
                    }else{
                      item.orgLevelName = '未定级'
                    }
                    if(item.orgpro=='1'){
                      item.orgproName = '行政机构';
                    }else if(item.orgpro=='2'){
                      item.orgproName = '全额拨款事业单位';
                    }else if(item.orgpro=='3'){
                      item.orgproName = '差额拨款事业单位';
                    }else if(item.orgpro=='4'){
                      item.orgproName = '自收自支事务单位';
                    }else{
                      item.orgproName = '其他';
                    }
                    return item
                  })
                  this.total = res.data.total
                }
              }
            })
					},
          //请求查询条件
          clearSearch () {
            this.seachForm.orgname = ''
            this.seachForm.exetype = ''
            this.find()
          },
					// 打开新增窗体
					showAdd () {
						$('#addWin').modal('show')
					},
					// 新增
					add () {
            console.log('提交的数据:', JSON.stringify(this.addForm))
						// 异步请求提交表单数据
						$.ajax('http://localhost:8080/organization/add', {
							type: 'post',
							contentType: 'application/json',
              // 将js中字面量对象转换为json串
							data: JSON.stringify(this.addForm),
							success: resp => {
								if(resp.code==200){
                  alert('新增成功')
                  this.find()
                  this.closeAddWin()
                }
							},
							error: resp => {
								alert('新增失败')
								this.closeAddWin()
							}
						})
					},
					// 删除
					remove (id) {
						if (confirm('确认删除该条数据吗?')) {
							// 删除的异步请求
							$.ajax(`http://localhost:8080/organization/remove/${id}`, {
                type: 'delete',
                success: res => {
                  if(res && res.code==200){
                    alert('删除成功')
                    this.find()
                  }
                }
              })
						}
					},
					// 批量删除
					removeBatch () {
						if (confirm('确认删除该条数据吗?')) {
              $.ajax('http://localhost:8080/organization/remove',{
                type: 'delete',
                data: {
                  id: this.checkedId
                },
                traditional:true,
                success: res => {
                  if(res && res.code == 200){
                    alert('批量删除成功')
                    this.find()
                  }
                }
              })
							// 删除的异步请求
							// alert('删除成功' + id)
						}
					},
					// 打开新增窗体
					showEdit (id) {
						// this.editForm.id = id
						// 单条记录查询的异步请求
            $.ajax(`http://localhost:8080/organization/find/${id}`, {
              type: 'get',
              success: res => {
                if(res && res.code == 200){
                  this.editForm = res.data
                  console.log(this.editForm)
                  $('#editWin').modal('show')
                }
              }
            })
					},
					// 新增
					edit () {
						// 异步请求提交表单数据
						$.ajax('http://localhost:8080/organization/edit', {
							type: 'put',
							contentType: 'application/json',
							data: JSON.stringify(this.editForm),
							success: resp => {
								alert('编辑成功')
								this.find()
								this.closeEditWin()
							},
							error: resp => {
								alert('编辑失败')
								this.closeEditWin()
							}
						})
					},
					// 关闭新增窗体
					closeAddWin () {
						this.addForm = {
							orgno: '',
							orgcode: '',
							orgname: '',
							exetype: '',
							areacode: '',
							areatype: '',
							listingdate: '',
							standalonedate: '',
							zbbdocdate: '',
							linkadd: '',
							zipcode: '',
							orglevel: '',
							orgpro: ''
						}
						$('#addWin').modal('hide')
					},
					// 关闭编辑窗体
					closeEditWin () {
						this.editForm = {
							id: 0,
							orgno: '',
							orgcode: '',
							orgname: '',
							exetype: '',
							areacode: '',
							areatype: '',
							listingdate: '',
							standalonedate: '',
							zbbdocdate: '',
							linkadd: '',
							zipcode: '',
							orglevel: '',
							orgpro: ''
						}
						$('#editWin').modal('hide')
					}
				},
				computed: {},
				watch: {
					// isCheckedAll (val) {
					// 	this.checkedId = val ? this.userList.map(item => item.id) : []
					// 	console.log('watch-isCheckedAll', val, this.checkedId)
					// },
					// checkedId (val) {
					// 	this.isCheckedAll = val.length == this.userList.length
					// }
				},
				created () {
					this.find()
				}
			})
		</script>
	</body>
</html>
